<template>
  <div class="box">
    <!-- <h2>首页页面</h2> -->
    <navbar></navbar>
    <div class="head">
      <!-- 输入搜索框      @focus="searchFocus" @cancel="onCancel"   -->
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        background="#c52519"
        @search="onSearch"
      >
        <template #label>
          <span class="search-logo">JD</span>
        </template>
        <template #action>
          <span style="color: #fff; font-size: 16px">登录</span>
        </template>
        <template #left>
          <van-icon
            name="wap-nav"
            color="#fff"
            size="25px"
            style="margin-right: 10px"
          />
        </template>
      </van-search>
    </div>
    <!-- lu轮播图-------- -->
    <div class="lunbo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="@/assets/img/home/1.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/img/home/2.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/img/home/3.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/img/home/4.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/img/home/5.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/img/home/6.jpg" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <van-swipe class="my-swipe1" autoplay="false" indicator-color="white">
        <van-swipe-item
          ><van-grid :column-num="5" :border="false">
            <van-grid-item
              v-for="value in navinfo"
              :key="value.id"
              :icon="value.src"
              :text="value.text"
            /> </van-grid
        ></van-swipe-item>
        <van-swipe-item
          ><van-grid :column-num="5" :border="false">
            <van-grid-item
              v-for="value in navinfo2"
              :key="value.id"
              :icon="value.src"
              :text="value.text"
            /> </van-grid
        ></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 活动秒杀 -->
    <div class="active">
      <div class="more">
        <span>京东秒杀</span>
        <span>16</span>
        <!-- <span><a>00</a>:<a>00</a>:<a>00</a></span> -->
        <van-count-down :time="time">
          <template #default="timeData">
            <a class="block">{{ timeData.hours }}</a>
            <a class="colon">:</a>
            <a class="block">{{ timeData.minutes }}</a>
            <a class="colon">:</a>
            <a class="block">{{ timeData.seconds }}</a>
          </template>
        </van-count-down>
        <span>爆款轮番秒<van-icon name="arrow" /></span>
      </div>
      <!--       
      <van-tabs v-model="active" swipeable animated>
        <van-tab
          v-for="index in activeinfo"
          :key="index.id"
          :title="'商品' + index.id"
        >
          <template
            ><img
              :src="index.src"
              width="50"
              style="vertical-align: middle"
              alt=""
            />
            <span>{{ index.price }}</span>
          </template>
        </van-tab>
      </van-tabs> -->
      <van-swipe class="my-swipe3" autoplay="false" indicator-color="white">
        <van-swipe-item
          ><van-grid :column-num="5">
            <van-grid-item
              :border="false"
              v-for="value in activeinfo"
              :key="value.id"
              :icon="value.src"
              :text="value.price"
            /> </van-grid
        ></van-swipe-item>
        <van-swipe-item
          ><van-grid :column-num="5">
            <van-grid-item
              :border="false"
              v-for="value in activeinfo2"
              :key="value.id"
              :icon="value.src"
              :text="value.price"
            /> </van-grid
        ></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品卡片 -->
    <!-- 商品卡片 -->
    <div class="card-list">
      <GoodsItem></GoodsItem>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar.vue";
import { Toast } from "vant";
import GoodsItem from "./goodItem.vue";
export default {
  data() {
    return {
      // 倒计时
      time: 30 * 60 * 60 * 1000,
      value: "",
      navinfo: [
        { id: 1, src: require("@/assets/img/bar/1.png"), text: "京东超市" },
        { id: 2, src: require("@/assets/img/bar/2.png"), text: "数码电器" },
        { id: 3, src: require("@/assets/img/bar/3.png"), text: "京东新百货" },
        { id: 4, src: require("@/assets/img/bar/4.png"), text: "京东生鲜" },
        { id: 5, src: require("@/assets/img/bar/5.png"), text: "京东到家" },
        { id: 6, src: require("@/assets/img/bar/6.png"), text: "充值缴费" },
        { id: 7, src: require("@/assets/img/bar/7.png"), text: "附近好店" },
        { id: 8, src: require("@/assets/img/bar/8.png"), text: "领券" },
        { id: 9, src: require("@/assets/img/bar/9.png"), text: "PLUS会员" },
        { id: 10, src: require("@/assets/img/bar/10.png"), text: "京东国际" },
      ],
      navinfo2: [
        { id: 1, src: require("@/assets/img/bar/11.png"), text: "京东拍卖" },
        { id: 2, src: require("@/assets/img/bar/12.png"), text: "玩3C" },
        { id: 3, src: require("@/assets/img/bar/13.png"), text: "沃尔玛" },
        { id: 4, src: require("@/assets/img/bar/14.png"), text: "美妆馆" },
        { id: 5, src: require("@/assets/img/bar/15.png"), text: "京东旅行" },
        { id: 6, src: require("@/assets/img/bar/16.png"), text: "拍拍二手" },
        { id: 7, src: require("@/assets/img/bar/17.png"), text: "全部" },
      ],
      // 活动秒杀
      active: 8,
      // 活动秒杀信息
      activeinfo: [
        { id: 1, src: require("@/assets/img/active/1.jpg"), price: "￥46" },
        { id: 2, src: require("@/assets/img/active/2.jpg"), price: "￥2379" },
        { id: 3, src: require("@/assets/img/active/3.jpg"), price: "￥62" },
        { id: 4, src: require("@/assets/img/active/4.jpg"), price: "￥698" },
        { id: 5, src: require("@/assets/img/active/5.jpg"), price: "￥459" },
      ],
      activeinfo2: [
        { id: 1, src: require("@/assets/img/active/6.jpg"), price: "￥248" },
        { id: 2, src: require("@/assets/img/active/7.jpg"), price: "￥1399" },
        { id: 3, src: require("@/assets/img/active/8.jpg"), price: "￥297" },
        { id: 4, src: require("@/assets/img/active/9.jpg"), price: "￥2894" },
      ],
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
  },
  components: {
    GoodsItem,
    navbar,
  },
};
</script>

<style scoped>
.box {
  /* background-color: rgb(233, 233, 233); */
}
.search-logo {
  color: #e93c3e;
  font-weight: bold;
  font-size: 20px;
}
.van-search__content--round {
  width: 300px;
}
.lunbo {
  /* background: #c52519; */
  background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}
.my-swipe {
  margin: 0 auto 0;
  border-radius: 15px;
  width: 360px;
  height: 150px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  padding: 0;
  text-align: center;
  background-color: #ffffff;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.my-swipe1 .van-swipe-item {
  color: #fff;
  text-align: center;
  background-color: #ffffff;
}
::v-deep .van-swipe__indicator--active {
  background-color: red;
}
/* --------------------- */
.active {
  background-color: #fff;
  border-radius: 5px;
  height: 140px;
  width: 369px;
  overflow: hidden;
  margin: auto;
  border: 1px solid rgb(189, 189, 189);
}
.active .more {
  width: 100%;
  height: 35px;
  background: url("../../assets/img/active/bgccc.png") no-repeat center/cover;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.active .more span {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: #333;
}
.active .more span:nth-of-type(2) {
  width: 10%;
  color: red;
  background: url("../../assets/img/active/bgc.png") no-repeat top 0 right 0 /21px
    18px;
}
/* .active > .more span:nth-of-type(3) {
  width: 40%;
  color: red;
}
.active > .more span:nth-of-type(3) a {
  display: inline-block;
  padding: 1px;
  border-radius: 5px;
  background-color: red;
  color: #fff;
  font-size: 14px;
} */
.active .more span:nth-of-type(3) {
  color: red;
}
.active .more span:nth-of-type(3) .van-icon-arrow {
  display: inline-block;
  background-color: red;
  color: white;
  border-radius: 50%;
}
.active ::v-deep .van-tabs__content {
  display: flex;
}
.active ::v-deep .van-tabs__content .van-tab__pane span {
  color: red;
}
/* ------------ogo0ds */
.card-list {
  margin: 15px auto 0;
  width: 369px;
  border-radius: 5px;
}

.van-count-down {
  width: 40%;
  height: 18px;
}
.van-count-down .colon {
  display: inline-block;
  /* margin: 0 4px; */
  color: #ee0a24;
}
.van-count-down .block {
  display: inline-block;
  width: 20px;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.my-swipe3 {
  height: 105px;
}
.my-swipe3 ::v-deep i.van-icon.van-grid-item__icon {
  font-size: 55px;
}
.my-swipe3 ::v-deep .van-grid-item__text {
  font-size: 15px;
  color: #f2270c;
  font-weight: 550;
  /* font-family: JDZhengHT-EN-Regular; */
}
.my-swipe3 .van-swipe-item {
  color: #fff;
  text-align: center;
}
</style>